<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ajax</title>
</head>
<body>
<ul id="repos"></ul>
<!-- <script type="module"> -->
<script>
// https://api.github.com/users/yuan479/repos
// 前后端分离  js 主动的请求接口（异步任务），拿到数据
// xhr 对象？ 
// 早期接口请求的对象

// 共同点 http xhr 对象 
// 区别 url  参数
const getJSON = async (url) =>  {
  return new Promise((resolve, reject) => {
  // executor  
    // pending 状态
    const xhr = new XMLHttpRequest(); // 实例化

    console.log(xhr.readyState)//http 请求  GET  打开一个数据传输的通道
    // 底层 好理解 浏览器网络请求的通道被打开
    xhr.open('GET', 'https://api.github.com/users/yuan479/repos')
    console.log(xhr.readyState)
    xhr.send() // 发送请求 
    // es6之前的 对象 连promise 都没有，拿来的then 
    // 事件监听 回调函数 
    console.log(xhr.readyState)
    xhr.onreadystatechange = function() {
      // console.log(xhr.readyState);
      if (xhr.readyState == 4) {
        // 响应内容到达了 
        // 后端数据接口的格式是XML html 也是XML 的一种格式 <song><author>林俊杰</author><title>江南</title></song>
        //JOSN { author: '林俊杰', title: '江南'}`
        // console.log(xhr.responseText, typeof xhr.responseText)
        resolve(JSON.parse(xhr.responseText))
      }
    }
  })
}
(async () => {
  const data = await getJSON('https://api.github.com/users/yuan479/repos')
// fullfilled 
  // console.log(data);
  document.getElementById('repos').innerHTML = 
    data.map(item => `<li>${item.name}</li>`).join('')
})()

</script> 
</body>
</html>